<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>登录模拟</title>
    <!-- import CSS -->
  </head>
  <body>
    <div id="app">
      <h1>登录模拟流程 {{hello}}</h1>
      <p><a href="/swagger-ui.html#/%E8%AE%A4%E8%AF%81/controller-mock%5Cauth-login" target="_blank">swagger 接口地址</a></p>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="box-card">
            <h2>当前用户信息</h2>
            <div>
              <el-avatar v-if="!user.avatar" icon="el-icon-user-solid"></el-avatar>
              <el-avatar v-else :src="user.avatar"></el-avatar>
              <div v-if="!user.id">当前用户未登录</div>
              <div>id ：{{user.id || '-'}}</div>
              <div>name ：{{user.name || '-'}}</div>
              <div>phone：{{user.phone || '-'}}</div>
              <div>money：{{user.money || '-'}}</div>
              <div>
                token：
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="token"></el-input>
              </div>
              <div v-if="user.role">
                角色 role:
                <div>key: {{user.role.key}} ,name: {{user.role.name}}</div>
                <div v-if="user.role.perms">
                  权限 perms
                  <li v-for="(p,idx) in user.role.perms">{{p.key}}，{{p.name}}</li>
                </div>
              </div>
            </div>
            <el-divider direction="horizontal" content-position="left"></el-divider>
            <el-button @click="getUserInfo" type="primary">获取用户信息</el-button>
            <el-button @click="logout">退出登录</el-button>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card class="box-card">
            <h2>登录表单</h2>
            <el-form :model="loginForm" ref="loginFormRef" :rules="rules" label-width="100px">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model.trim="loginForm.phone" maxlength="11"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model.trim="loginForm.password"></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="captcha">
                <el-input v-model.trim="loginForm.captcha" style="width: 100px"></el-input>
                <!-- <div class="login-code"> -->
                <img :src="captchaUrl" @click="getCode" class="login-code-img" style="height: 40px; position: absolute; right: 0; top: 0" />
                <!-- </div> -->
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="loginSubmit()">提交</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card>
            <h2>注册表单</h2>
            <el-upload
            class="upload-demo"
            action="/common-api/common/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            name="filename"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
            </template>
          </el-upload>
          </el-card>
        </el-col>
      </el-row>

      <el-card class="box-card" style="margin-top: 50px">
        <p>用户数： {{userList.length}}</p>
        <el-button @click="getUserList" type="primary">刷新用户列表</el-button>
        <el-table :data="userList" style="width: 100%">
          <el-table-column prop="avatar" label="头像" width="80">
            <template #default="scope">
              <el-avatar v-else :src="scope.row.avatar"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
          <el-table-column prop="password" label="密码" width="180"></el-table-column>
          <el-table-column prop="money" label="余额" width="180"></el-table-column>
        </el-table>
      </el-card>

      <!-- <div>
        <el-button @click="visible = true" type="primary" icon="el-icon-search">对话框 true</el-button>
        <el-button @click="visible = false">对话框 false</el-button>
        <el-dialog v-model="visible" title="Hello world">
          <p>Try Element dialog</p>
        </el-dialog>
      </div> -->
    </div>
  </body>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.9.4/index.css" >
  <!-- 引入组件库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.9.4/index.full.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <script>
    console.log(Vue);
    console.log(ElementPlus);
    console.log(axios);

    let app = Vue.createApp({
      mounted() {
        console.log('mounted ....', this.hello);
      },
      methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    },
      setup() {
        const ref = Vue.ref;
        const reactive = Vue.reactive;
        const toRefs = Vue.toRefs;
        const onMounted = Vue.onMounted;

        const ElMessage = ElementPlus.ElMessage;
        console.log('setup .... ');

        const hello = ref('welcome');
        const captchaUrl = ref('/mock-api/auth/captcha');
        const visible = ref(false);
        const token = ref('');
        const state = reactive({
          status: 1,
          user: { id: null, phone: '', name: '', avatar: '' },
          userList: [{ name: '少年阿虎', phone: '13512345678', password: '123456' }],
          loginForm: { phone: '13311111111', password: '123456' },
          registerForm: { phone: '19911111111', password: '123456' },
          rules: {
            phone: [{ required: 'true', message: '账户不能为空', trigger: 'blur' }],
            password: [{ required: 'true', message: '密码不能为空', trigger: 'blur' }],
          },
        });

        onMounted(() => {
          console.log('onMounted 111 ....', hello);
          if (Cookies.get('token')) {
            token.value = Cookies.get('token');
            ElMessage.success({
              message: 'Cookies 里有token',
              type: 'success',
            });
            getUserInfo();
          }
          getUserList();
        });

        const getUserList = () => {
          console.log('getUserList ....', hello);
          state.status = 2;
          axios
            .get('/mock-api/auth/userList')
            .then(function (res) {
              console.log(res.data, res.data.data.userList);
              state.status = 3;
              state.userList = res.data.data.userList;
            })
            .catch(function (error) {
              console.log(error);
            });
        };

        const loginSubmit = () => {
          console.log('loginSubmit ....', state.loginForm, state.loginForm.phone);
          axios
            .post('/mock-api/auth/login', {
              phone: state.loginForm.phone,
              password: state.loginForm.password,
              captcha: state.loginForm.captcha || null,
            })
            .then(function (res) {
              console.log(res.data, res.data.data.userList);
              if (res.data.code == 200) {
                if (res.data.data.success == 1) {
                  ElMessage.success({
                    message: '恭喜你，登录成功',
                    type: 'success',
                  });

                  state.user = res.data.data.userInfo;
                  token.value = res.data.data.token;
                  Cookies.set('token', res.data.data.token);
                } else {
                  ElMessage.error({
                    message: res.data.msg,
                    type: 'error',
                  });
                }
              } else {
                ElMessage.error({
                  message: res.data.msg || '登录失败，请重试！',
                  type: 'error',
                });
              }
              // state.status = 3;
              // state.userList = res.data.data.userList;
            })
            .catch(function (error) {
              console.log(error);
            });
        };

        const getUserInfo = () => {
          console.log('getUserInfo ....', state.loginForm);

          axios
            .post(
              '/mock-api/auth/userInfo',
              {},
              {
                headers: {
                  // token: token.value,
                  // token: Cookies.get('token'),
                },
              }
            )
            .then(function (res) {
              console.log(res.data);
              if (res.data.code == 200) {
                if (res.data.data.success == 1) {
                  ElMessage.success({
                    message: res.data.msg || '恭喜你，获取用户信息成功',
                    type: 'success',
                  });
                  state.user = res.data.data.userInfo;
                } else {
                  ElMessage.error({
                    message: res.data.msg || '获取失败，请重试！',
                    type: 'error',
                  });
                }
              } else {
                ElMessage.error({
                  message: res.data.msg || '获取失败，请重试！',
                  type: 'error',
                });
              }
              // state.status = 3;
              // state.userList = res.data.data.userList;
            })
            .catch(function (error) {
              console.log(error);
            });
        };

        const logout = () => {
          console.log('logout ....');
          state.user = {};
          token.value = '';
          Cookies.remove('token');
        };

        const resetloginForm = () => {
          console.log('resetloginForm ....', state.loginForm);
        };

        const getCode = () => {
          console.log('getCode ....');
          // captchaUrl.value = '';
          captchaUrl.value = '/mock-api/auth/captcha?t=' + Date.now();
        };

        const registerSubmit = () => {
          console.log('registerSubmit ....', state.registerForm);

          axios
            .post('/mock-api/auth/register', {
              phone: state.registerForm.phone,
              password: state.registerForm.password,
            })
            .then(function (res) {
              console.log(res.data, res.data.data.userList);
              if (res.data.code == 200) {
                ElMessage.success({
                  message: res.data.msg || '恭喜你，注册成功',
                  type: 'success',
                });
                getUserList();
              } else {
                ElMessage.error({
                  message: res.data.msg || '登录失败，请重试！',
                  type: 'error',
                });
              }
              // state.status = 3;
              // state.userList = res.data.data.userList;
            })
            .catch(function (error) {
              console.log(error);
            });
        };

        const resetRegisterForm = () => {
          console.log('resetRegisterForm ....', state.registerForm);
        };

        return {
          hello,
          visible,
          token,
          captchaUrl,
          ...toRefs(state),

          loginSubmit,
          resetloginForm,
          getUserList,
          getUserInfo,
          logout,
          registerSubmit,
          getCode,
        };
      },
    });
    app.use(ElementPlus);
    app.mount('#app');
  </script>
</html>
